<template>
  <div class="air_ticket" v-if="order">
    <div class="air_date_address">
      <div class="air_date">{{order.arr_date}}</div>
      <div class="air_address">{{order.org_city_name}} - {{order.dst_city_name}}</div>
    </div>
    <div class="air_time">
      <div class="departure_time">
        {{order.dep_time}}
        <span>{{order.org_airport_name}}{{order.org_airport_quay}}</span>
      </div>
      <div class="difference_time">
        <span>---{{$route.query.time}}---</span>
        <span>{{order.airline_name}}{{order.flight_no}}</span>
      </div>
      <div class="arrival_time">
        {{order.arr_time}}
        <span>{{order.dst_airport_name}}{{order.dst_airport_quay}}</span>
      </div>
    </div>
    <div class="dotted"></div>
    <div class="air_sum">
      <span>订单总价</span>
      <span>金额</span>
      <span>数量</span>
    </div>
    <div class="dotted"></div>
    <div class="air_sum">
      <span>成人机票</span>
      <span>￥{{order.seat_infos.par_price}}</span>
      <span>x{{userLength}}</span>
    </div>
    <div class="dotted"></div>
    <div class="air_sum">
      <span>机建＋燃油</span>
      <span>¥{{order.airport_tax_audlet}}/人/单程</span>
      <span>x{{userLength}}</span>
    </div>
    <div class="dotted"></div>
    <div class="rental">
      应付总额：
      <span>￥{{price}}</span>
    </div>
  </div>
</template>

<script>
export default {
  props:['price','userLength'],
  data() {
    return {
      order: null,
    };
  },
  async mounted() {
    const { id, seat_xid } = this.$route.query;
    const res = await this.$axios.get("/airs/" + id, { params: { seat_xid } });
    this.order = res.data;
    console.log(this.order);
  },
};
</script>

<style lang="less" scoped>
.air_ticket {
  margin-left: 50px;
  width: 350px;
  border: 1px solid #ccc;
  .air_date_address {
    height: 50px;
    font-size: 16px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .air_time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    margin-bottom: 20px;
    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 25px;
      span {
        font-size: 13px;
        color: #999;
        padding-top: 5px;
      }
    }
    .difference_time {
      font-size: 12px;
    }
  }
  .dotted {
    border-bottom: 1px dotted #ccc;
  }
  .air_sum {
    height: 40px;
    padding: 0 15px;
    font-size: 14px;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .rental {
    height: 60px;
    font-size: 16px;
    padding: 0 15px;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 26px;
      color: #ffa500;
    }
  }
}
</style>